Ext.onReady( function() {
	
    var manufacturerStore = new Ext.data.JsonStore({
        autoLoad: false,  //autoload the data
        url: 'ManufacturerAction_jsonList.action',
        root: 'manufacturerList',
        fields: ['name']
		});
    
    var carStore = new Ext.data.JsonStore({
        autoLoad: false,  //autoload the data
        url: 'CarAction_jsonList.action',
        root: 'carList',
        fields: ['modelName']
		});
    
    var manufacturerComboBox = new Ext.form.ComboBox({
		fieldLabel: 'Manufacturer',
		id: 'manufacturer-combo-box',
		hiddenName: 'manufacturerName',
		store: manufacturerStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        listeners: {'select': manufacturerSelected }

	});
    
    var carComboBox = new Ext.form.ComboBox({
		fieldLabel: 'Model',
		id: 'car-combo-box',
		hiddenName: 'carModelName',
		store: carStore,
        displayField:'modelName',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        disabled: true
	});
    
    function manufacturerSelected()
    {
    	Ext.Ajax.request({
			url: 'CarAction_jsonListByManufacturer.action',
			params: { manufacturerName : manufacturerComboBox.value},
			callback :  carListByManufacturerCallback
		});
    }
    
    function carListByManufacturerCallback(options, success, response)
    {	
    	if (success)
    	{
    		var jsonData = Ext.decode(response.responseText);
    		carComboBox.clearValue();
    		carStore.loadData(jsonData);
    		carComboBox.enable();
    	}
    	else
    	{
    		Ext.Msg.show({			
    			title : 'Error',
    		   	msg: 'Data could not be saved to server',				   
    		   	icon: Ext.MessageBox.ERROR,
    		   	buttons: Ext.Msg.OK
    		});	
    	}
    }
	
});
